<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-row>
      <el-card>
        <el-col :span="12" style="height: 320px">
          <div class="grid-content bg-purple">
            <div class="block">
              <img :src="spot.imgUrl" style="width: 550px;">
            </div>

          </div>
        </el-col>
        <el-col :span="12" style="height: 320px">
          <div class="grid-content bg-purple-light" style="margin-top: 10px;margin-bottom: 20px">
            <span style="font-size: 25px;color: #0f294d;font-weight: bold">{{spot.name}}</span>
            <el-divider></el-divider>
            <p style="font-size: 17px;color: #455873"><i class="el-icon-location-outline" style="margin-right: 10px"/>{{ spot.location }}</p>
            <el-divider></el-divider>
            <p style="font-size: 17px;color: #455873"><span class="intro"><i class="el-icon-office-building" style="margin-right: 10px"/>{{ spot.details }}</span></p>
            <el-divider></el-divider>
            <el-date-picker
                v-model="date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"

                @change="dateChange"
                :picker-options="{ disabledDate: disabledDate }">
            </el-date-picker>
            <span style="margin-left: 30px">居住：{{ dateDiff }} 天</span>
          </div>

        </el-col>
        <div style="font-size: 20px;font-weight: normal">注意事项：</div>
        <div  v-html="spot.notice"></div>
      </el-card>

      <el-card style="width: 1200px">
        <div>
          <el-card v-for=" vo in ticket" >
            <div style="overflow: hidden">
              <div style="float: left">
                <div style="text-align: center;font-weight: bold;margin-top: 5px" ><span style="color: #0f294d;font-size: 20px" >{{vo.name}}</span></div>
              </div>
              <div style="float: left;margin-left: 250px">
                <el-popover
                    placement="top-start"
                    trigger="hover"
                    content="预订此产品后可快速确认订单">
                  <el-tag slot="reference" >立即确认</el-tag>
                </el-popover>
                <el-popover
                    style="margin-left: 50px"
                    placement="top-start"
                    trigger="hover"
                    content="订单预订成功后不可取消。订单需等门店或供应商确认后生效，
                    订单确认结果以邮件或app通知为准，如订单不确认将全额退款至您的付款账户。">
                  <el-tag slot="reference">不可取消</el-tag>
                </el-popover>
                <span style="color:#409EFF;font-size: 20px;margin-left: 200px;"> ￥{{vo.price}}/天</span>
              </div>
              <el-button  style="margin-right: 100px;float: right" type="warning"  @click="goToPay(vo)">预定</el-button>
            </div>
          </el-card>
        </div>
      </el-card>

    </el-row>

  </div>
</template>

<script>

import moment from 'moment';
export default {
  name: "DetailsView",
  data() {
    return {
      startDate: new Date(),
      endDate: new Date(),
      dateDiff: 1,
      date:[],
      spot: {},
      ticket:[],
      activeIndex: '1',
    }
  },
  methods: {
    dateChange(){
      this.startDate=this.date[0];
      this.endDate=this.date[1];
      console.log(this.startDate)
      console.log(this.endDate)
      if(this.startDate.getTime()===this.endDate.getTime()){
        let day = new Date(this.startDate.getTime());
        day.setDate(day.getDate()+1);//设置为后一天
        this.endDate = new Date(day);
        this.date[1]=this.endDate;
      }
      this.calculateDateDiff();
    },
    disabledDate(time) {
      const currentDate = new Date();
      return time.getTime() < currentDate.setHours(0, 0, 0, 0); // 禁用当前时间之前的日期
    },
    // 计算日期差异的逻辑
    calculateDateDiff() {
      if (this.startDate && this.endDate) {
        const diff = moment(this.endDate).diff(moment(this.startDate), 'days');
        this.dateDiff = diff;
      } else {
        this.dateDiff = 0;
      }
    },
    goToPay(info){
      const startDate=this.formatDate(this.startDate)
      const endDate=this.formatDate(this.endDate)
      this.$router.push({name:'pay',
        params: {info:{categoryId:info.categoryId,category:info.name,subjectId:5,dateDiff:this.dateDiff,
            subject:this.spot.name,price:info.price,startDate:startDate,endDate:endDate}}})
    },
    //根据ID查询景区详情
    select() {
      let id = new URLSearchParams(location.search).get("id");
      console.log(id)
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get("http://localhost:8080/v1/spots/" + id + "/list").then((response) => {
        if (response.data.code == 1) {
          this.spot = response.data.data;
          console.log(this.spot)
        }
      })
    },
    //根据ID查询门票详情
    selectTicket() {
      let id = new URLSearchParams(location.search).get("id");
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get("http://localhost:8080/v1/spots/" + id + "/selectVote").then((response) => {
        if (response.data.code == 1) {
          this.ticket = response.data.data;
        }
      })
    },
    loadDate(){
      let now=new Date();
      this.endDate = new Date(  //获取此时年月日的后一天
          now.getFullYear(),
          now.getMonth(),
          now.getDate() + 1 //获取明天
      );
      this.date=[this.startDate,this.endDate]
      console.log(this.date)
    },
    formatDate (d) {
      var date = new Date(d);
      var YY = date.getFullYear() + '-';
      var MM =
          (date.getMonth() + 1 < 10
              ? '0' + (date.getMonth() + 1)
              : date.getMonth() + 1) + '-';
      var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
      return YY + MM + DD;
    },
  },
  created: function () {
    this.selectTicket();
    this.select();
    this.loadDate();

  }
}
</script>

<style scoped>

.intro{
  display: -webkit-box;/*作为弹性伸缩盒子模型显示*/
  -webkit-line-clamp: 4; /*显示的行数；如果要设置2行加...则设置为2*/
  overflow: hidden; /*超出的文本隐藏*/
  text-overflow: ellipsis; /* 溢出用省略号*/
  -webkit-box-orient: vertical;/*伸缩盒子的子元素排列：从上到下*/
}

.el-divider--horizontal{
  margin: 18px 0;
}

.el-tag{
  width: 98px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
}
</style>